<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* div {
        border: 3px solid #000;
        background-image: url("./images/bg3.jpg");
        background-attachment: fixed;
      }
      section {
        width: 100%;
        background-color: aquamarine;
        margin-bottom: 300px;
      } */

      main {
        width: 600px;
        height: 400px;

        padding: 100px;
        border: 50px dashed #000;

        background-image: url("./images/zhuzhu.png");
        /* background-repeat: no-repeat; */
        /* background-size: 100% 100%; */
        /* background-size: contain; */

        /* background-origin: border-box; */
        background-clip: content-box;
      }
    </style>
  </head>
  <body>
    <!-- <div>
      <section>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </section>
      <section>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </section>
      <section>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </section>
      <section>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
        <p>hello</p>
      </section>
    </div> -->

    <main></main>
  </body>
</html>

<!-- 
  背景图片固定属性
    background-attachment
      fixed: 背景图固定
      scroll: 背景图随内容滚动

  背景图的大小属性
    background-size
      两个值
      分别是水平大小和垂直大小
      关键字 
        cover: 此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。
        contain: 此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。
        
  背景图起点属性
    background-origin
      默认情况下，背景图的起始点是padding的左上角
      padding-box: 起始点是padding的左上角开始 , 默认值
      content-box: 起始点是宽高的左上角开始
      border-box: 起始点是边框的左上角开始

  
  背景图的绘画区域
    background-clip
      padding-box: padding以外裁切 
      content-box: 宽高以外裁切 
      border-box: 边框以外裁切 , 默认值



  缩写：background:bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

 -->
